<template>
	<div class="user-center abs full">
		<div class="rel full overflow-hidden">
			<div class="usc-header bind" v-if="customer.isMobileBind">
				<div class="user-photo rel">
					<img class="avatar" :src="customer.avatarUrl" alt="">
					<!-- <span class="abs badge" v-if="showBadge"></span> -->
				</div>
				<div class="user-info">
					<h2 v-text="customer.nickName" v-cloak></h2>
					<p v-if="customer.memberOfDay">
						<span>日包剩余&nbsp;&nbsp;</span>
						<span v-text="customer.memberOfDay.leftDay"></span>天<span v-text="customer.memberOfDay.leftHour"></span>小时<span v-text="customer.memberOfDay.leftMinute"></span>分
					</p>
					<p v-if="customer.memberOfMonth">
						<span>
							<span>包月会员&nbsp;&nbsp;</span>
							<span>有效期至：</span><span v-text="customer.memberOfMonth.invalidTime"></span>
						</span>
					</p>
					<div class="inline-block mobile">已绑定手机</div>
					<span class="inline-block renew" v-text="customer.customerLvList&&customer.customerLvList.length?'续费':'成为包月会员'" @click="renew()"></span>
					<span class="upgrade" v-if="0">升级VIP</span>
				</div>
			</div>
			<!--未绑定手机-->
			<div class="usc-header unbind" v-if="!customer.isMobileBind">
				<div class="user-photo">
					<img class="avatar" :src="customer.avatarUrl" alt="">
				</div>
				<a href="javascript:void(0);" class="to-bind" @click="goToPage('/bind-mobile')">绑定手机</a>
			</div>
			<!--个人中心list-->
			<div class="usc-info">
				<ul>
					<li class="usc-item rel" @click="goToPage('/my-account')">
						<span class="usc-icon usc-icon-1"></span>
						<span>我的账户</span>
						<span class="usc-icon-right"></span>
					</li>
					<li class="usc-item rel" @click="goToPage('/my-reports')">
							<span class="usc-icon usc-icon-2"></span>
							<span>我的报告</span>
							<span class="usc-icon-right"></span>
					</li>
					<li class="usc-item rel" @click="goToPage('/my-evaluations')">
							<span class="usc-icon usc-icon-3"></span>
							<span>我的综合评价</span>
							<span class="usc-icon-right"></span>
					</li>
					<li class="usc-item rel" @click="goToPage('/my-favorites')">
							<span class="usc-icon usc-icon-4"></span>
							<span>我的收藏</span>
							<span class="usc-icon-right"></span>
					</li>
					<!-- <li class="usc-item rel" @click="goToPage('/help')">
							<span class="usc-icon usc-icon-5"></span>
							<span>帮助</span>
							<span class="usc-icon-right"></span>
					</li> -->
					<li class="usc-item rel" @click="goToPage('/feedback')">
							<span class="usc-icon usc-icon-6"></span>
							<span>意见反馈</span>
							<span class="usc-icon-right"></span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'user-center',
	data() {
		return {
			customer:{}
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.userCenter = this;
		this.getUserInfo();
	},
	activated() {
		document.title = '个人中心';
		if(this.customer.isMobileBind===false){
			this.getUserInfo();
		}
	},
	deactivated(){

	},
	methods: {
		// 获取用户信息
		getUserInfo(){
			let that=this;
			let customerId=this.$util.getCustomerId();
			if(!customerId){
				return;
			}
			let obj={customerId}
			this.$util.ajax('/customer/detail','post',obj).then(function(res){
				if(res.code=='100000'){
					let data=res.data;
					let lvList=data.customerLvList;
					if(lvList!=null && lvList.length>0){
						for(let i=0; i<lvList.length; i++){
							if(lvList[i].code.indexOf('MONTH')>-1){
								data.memberOfMonth=lvList[i];
							} else if(lvList[i].code.indexOf('DAY')>-1){
								data.memberOfDay=lvList[i];
								data.memberOfDay.leftDay=null;
								data.memberOfDay.leftHour=null;
								data.memberOfDay.leftMinute=null;
							}
						}
					}
					that.$store.user=data;
					that.customer=data;
					// 执行日包会员失效时间的倒计时
					if(that.customer.memberOfDay){
						that.countDown();
					}
				}
			})
		},
		// 跳转到指定的路由
		goToPage(route){
			let that=this;
			window.ensureExit='No';
			if(route=='/my-reports' || route=='/my-favorites'){
				if(this.customer.isMobileBind==false){
					this.showAlert('请先绑定手机，再使用此服务 : )',
						function(){that.$router.push('/bind-mobile')},
						function(){},
						'去绑定'
					)
					return;
				}
			}
			this.$router.push(route);
		},
		// 日包会员失效时间倒计时
		countDown(){
			let day=this.customer.memberOfDay;
			if(window.memberOfDayCountDown){
				window.clearTimeout(window.memberOfDayCountDown);
			}
			if(day.timeLeft>0){
				let json=this.$util.getLeftTime(day.timeLeft);
				day.leftDay=json.day;
				day.leftHour=json.hour;
				day.leftMinute=json.minute;
			}
			if(day.timeLeft>60000){
				day.timeLeft-=60000;
			} else {
				day.timeLeft=0;
				return;
			}
			window.memberOfDayCountDown = window.setTimeout(this.countDown,60000)
		},
		// "去付费"按钮的行为
		renew(){
			let day=this.customer.memberOfDay;
			let month=this.customer.memberOfMonth;
			if(day && day.valid==true){
				this.$router.push('/pay-day');
				return;
			}
			if(month && month.valid==true){
				this.$router.push('/pay-month');
				return;
			}
		}
	}
}
</script>

<style scoped>
.user-center {
	background-color: #fff;
}
a{
	color: #48494a;
}
.usc-header{
	width: 100%;
	height: 3.28rem;
	margin-top: -0.06rem;
	overflow: hidden;
}
.usc-header.bind{
	background:url("./image/bg.png");
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
.usc-header.unbind{
	background:url("./image/bg-unbind.png");
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
.unbind .user-photo{
	width: 1.37rem;
	height: 1.37rem;
	border-radius: 50%;
	margin: 0.59rem auto 0.22rem;
}
.user-photo img.avatar{
	display: block;
	border-radius: 50%;
	width: 1.37rem;
	height: 1.37rem;
}
.unbind .to-bind{
	display: block;
	text-decoration: none;
	width: 1.64rem;
	height: 0.5rem;
	border-radius: 0.5rem;
	margin: 0 auto;
	border: 0.01rem solid #fff;
	font-size: 0.24rem;
	color: white;
	line-height: 0.5rem;
	text-align: center;
}
.bind .user-photo{
	float: left;
	width: 1.37rem;
	height: 1.37rem;
	border-radius: 50%;
	margin: 0.59rem 0.32rem 0.22rem 0.35rem;
}
.bind .user-photo .badge{
	width: 0.41rem;
	height: 0.41rem;
	border-radius: 50%;
	background: url("../user-center/image/badge.png");
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	bottom: 0.08rem;
	right:0.17rem;
}
.bind .user-info{
	width: 5.46rem;
	float: left;
	margin-top: 0.59rem;
	text-align: left;
	font-size: 0.3rem;
}
.bind .user-info h2{
	font-weight: normal;
	font-size: 0.34rem;
	color: white;
	margin: 0;
}
.bind .user-info p{
	font-size: 0.24rem;
	color: white;
	line-height: 0.38rem;
	margin: 0;
}
.bind .user-info .mobile{
	font-size: 0.26rem;
	color: white;
	padding: 0.12rem 0.12rem 0.12rem 0;
	margin: 0;
}
.bind .user-info .renew{
	font-size: 0.26rem;
	color: #6af482;
	padding: 0.12rem;
	margin-left: 0.4rem;
}
.usc-info{
	margin-top: 0.2rem;
	overflow: hidden;
}
.usc-info ul{
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.usc-info ul li{
	float: right;
	color: #48494a;
	width: 7.23rem;
	font-size: 0.3rem;
	height: 0.9rem;
	line-height: 0.9rem;
	border-bottom: 0.02rem solid #f2f2f2;
}
.usc-item span{
	vertical-align: middle;
	display: inline-block;
	line-height: 0.9rem;
	float: left;
	margin-right: 0.25rem;
}
.usc-item .usc-icon{
	width: 0.53rem;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center;
}
.usc-item .usc-icon-1{
	background-image: url("./image/icon-1.png");
	-webkit-background-size: 0.44rem 0.37rem;
	background-size: 0.44rem 0.37rem;
}
.usc-item .usc-icon-2{
	background-image: url("./image/icon-2.png");
	-webkit-background-size: 0.33rem 0.4rem;
	background-size: 0.33rem 0.4rem;
}
.usc-item .usc-icon-3{
	background-image: url("./image/icon-3.png");
	-webkit-background-size: 0.38rem 0.38rem;
	background-size: 0.38rem 0.38rem;
}
.usc-item .usc-icon-4{
	background-image: url("./image/icon-4.png");
	-webkit-background-size: 0.40rem 0.41rem;
	background-size: 0.40rem 0.41rem;
}
.usc-item .usc-icon-5{
	background-image: url("./image/icon-5.png");
	-webkit-background-size: 0.37rem 0.41rem;
	background-size: 0.37rem 0.41rem;
}
.usc-item .usc-icon-6{
	background-image: url("./image/icon-6.png");
	-webkit-background-size: 0.37rem 0.41rem;
	background-size: 0.37rem 0.41rem;
}
.usc-item .usc-icon-right{
	width: 0.15rem;
	height: 0.15rem;
	position: absolute;
	right: 0.29rem;
	top: 0.34rem;
	margin-right: 0;
	border-left: 0.02rem solid #ccc;
	border-bottom: 0.02rem solid #ccc;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

</style>
